/*
 * @Author: scopesang
 * @Date: 2022-04-08 13:28:01
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 14:01:04
 * @FilePath: \cms-manage\src\textApp\App08Control.jsx
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { Component } from 'react'

export default class App08 extends Component {
    // #1、不受控组件
    // 使用ref属性，来代表组件标识,组件中表单元素没有写value值，与state数据无关，不受组件管理。(不推荐)
    constructor(props) {
        super(props)
        this.usernameRef = React.createRef();
        this.passwordRef = React.createRef();
        this.state = {
            username: '',
            password: ''
        }


    }
    // 旧版 API：字符串引用
    // 如果您之前使用过 React，
    // 您可能会熟悉一个较旧的 API，其中ref属性是字符串，
    // 例如"textInput"，并且 DOM 节点以this.refs.textInput.
    // 我们建议不要这样做，
    // 因为字符串引用存在一些问题，被认为是遗留问题，
    // 并且可能会在未来的某个版本中被删除。
    handleClick() {
        console.log(this.usernameRef.current.value, "ree");
        this.setState({
            username: this.usernameRef.current.value
        })
    }
    changePassWord(e) {
        this.setState({
            password: e.target.value
        })
    }
    render() {
        return (
            <div>
                用户名：<input type="text" ref={this.usernameRef} /> <br /> <br />
                密 & emsp; 码：<input type="text" onChange={this.changePassWord.bind(this)} /><br /> <br />
                {this.state.username} {this.state.password}
                <button onClick={this.handleClick.bind(this)}></button>
            </div >
        )
    }
}
